import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import { Button } from 'antd';
import Masks from '../../../components/Order/Masks/Masks';
import TitleInfo from '../../../components/Order/DetailCom/TitleInfo';
// import PackageInfo from '../../../components/Order/DetailCom/PackageInfo';
import DistributionInfo from '../../../components/Order/DetailCom/DistributionInfo';
import GoodsInfo from '../../../components/Order/DetailCom/GoodsInfo';

function OrderDetail(props) {
  const { state } = props;
  const {
    state: { id },
  } = useLocation();
  const navigate = useNavigate();
  const orderItem = state.filter(el => el.orderId === id)[0];
  // , orderItem.orderState === '已完成' ? [<PackageInfo orderItem={orderItem} />] : ''
  const layout = [
    [<TitleInfo id={id} />],
    [<DistributionInfo orderItem={orderItem} />],
    [<GoodsInfo orderItem={orderItem} />],
  ];
  return (
    <>
      <Button
        type='primary button'
        style={{ marginBottom: 20 }}
        onClick={() => {
          navigate(-1);
        }}>
        返回
      </Button>
      {layout.map((el, i) => (
        <Masks com={el} key={i}></Masks>
      ))}
    </>
  );
}

export default connect(
  state => ({
    state: state.orderReducer,
  }),
  {}
)(OrderDetail);
